<!DOCTYPE html>
<html>
<head>
    <title>BNB/USDT K线数据</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-financial"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
</head>
<body>
    <canvas id="myChart" width="800" height="600"></canvas>

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            fetch('http://127.0.0.1:5000/data')
                .then(response => response.json())
                .then(data => {
                    // 在控制台打印获取到的数据
                    console.log('Fetched data:', data);

                    // 检查特定的时间戳数据
                    const specificData = data.find(d => d.timestamp === 11);
                    console.log('Specific data for timestamp 11:', specificData);

                    // 将所有K线数据映射为图表数据
                    const candlestickData = data.map((d, index) => ({
                        x: index + 1, // 使用索引作为时间，从1开始递增
                        o: parseFloat(d.high), // 使用最高价作为开盘价
                        h: parseFloat(d.high),
                        l: parseFloat(d.low),
                        c: parseFloat(d.low), // 使用最低价作为收盘价
                        top_fractal: d.top_fractal === true,
                        bottom_fractal: d.bottom_fractal === true
                    }));

                    // 在控制台打印处理后的K线数据
                    console.log('Candlestick data:', candlestickData);

                    // 仅为顶分型和底分型添加标记点
                    const annotations = candlestickData.reduce((acc, d) => {
                        if (d.top_fractal) {
                            acc.push({
                                type: 'point',
                                xValue: d.x,
                                yValue: d.h,
                                backgroundColor: 'red',
                                radius: 5
                            });
                        }
                        if (d.bottom_fractal) {
                            acc.push({
                                type: 'point',
                                xValue: d.x,
                                yValue: d.l,
                                backgroundColor: 'blue',
                                radius: 5
                            });
                        }
                        return acc;
                    }, []);

                    // 添加顶分型和底分型之间的连线
                    for (let i = 0; i < candlestickData.length - 1; i++) {
                        if (candlestickData[i].top_fractal) {
                            for (let j = i + 1; j < candlestickData.length; j++) {
                                if (candlestickData[j].bottom_fractal) {
                                    annotations.push({
                                        type: 'line',
                                        mode: 'horizontal',
                                        xMin: candlestickData[i].x,
                                        xMax: candlestickData[j].x,
                                        yMin: candlestickData[i].h,
                                        yMax: candlestickData[j].l,
                                        borderColor: 'rgba(0, 255, 0, 0.5)',
                                        borderWidth: 2,
                                    });
                                    break;
                                }
                            }
                        } else if (candlestickData[i].bottom_fractal) {
                            for (let j = i + 1; j < candlestickData.length; j++) {
                                if (candlestickData[j].top_fractal) {
                                    annotations.push({
                                        type: 'line',
                                        mode: 'horizontal',
                                        xMin: candlestickData[i].x,
                                        xMax: candlestickData[j].x,
                                        yMin: candlestickData[i].l,
                                        yMax: candlestickData[j].h,
                                        borderColor: 'rgba(0, 255, 0, 0.5)',
                                        borderWidth: 2,
                                    });
                                    break;
                                }
                            }
                        }
                    }

                    // 在控制台打印注释数据
                    console.log('Annotations:', annotations);

                    // 检查是否有数据问题
                    if (candlestickData.length === 0) {
                        console.error('No valid data to display on the chart.');
                        return;
                    }

                    // 创建图表
                    const ctx = document.getElementById('myChart').getContext('2d');
                    const myChart = new Chart(ctx, {
                        type: 'candlestick',
                        data: {
                            datasets: [{
                                label: 'BNB/USDT K线数据',
                                data: candlestickData
                            }]
                        },
                        options: {
                            responsive: true,
                            scales: {
                                x: {
                                    type: 'linear',
                                    position: 'bottom'
                                }
                            },
                            plugins: {
                                annotation: {
                                    annotations: annotations
                                }
                            }
                        }
                    });

                    // 在控制台打印图表对象
                    console.log('Chart created:', myChart);
                })
                .catch(error => {
                    // 在控制台打印错误信息
                    console.error('Error fetching data:', error);
                });
        });
    </script>
</body>
</html>
